<template>
	<view class="Follow-auto friend_Page">
		<headerinfo></headerinfo>
		<view class="width60">
			<u-navbar title="展示标签" :placeholder="true" :autoBack="true"></u-navbar>
			
			<view class="taglist">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="title">
						{{item.name}}
					</view>
					<view class="li">
						<span @click="check(item2)" :class="item2.checked?'active':''" v-for="(item2,index2) in item.children2" :index="index2">{{item2.name}}</span>
					</view>
				</view>
			</view>
			
			<view class="btn" @click="submit">
				保存
			</view>
			
			<view style="height: 60rpx;"></view>
		</view>
		
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				userData:{
					tags:[]
				}
			};
		},
		
		onShow() {
			this.$api2.getUserInfo().then(res => {
				console.log('用户信息')
				console.log(res)
				this.userData = res
			})
			this.getData()
		},
		methods: {
			submit(){
			   let data = {
				   tags:[]
			   }	
			   this.list.forEach(item=>{
				   item.children2.forEach(item2=>{
					   if(item2.checked){
						   data.tags.push(item2.name)
					   }
				   })
			   })
			   
			   
			   if(data.tags.length>4){
				   return this.$Show.show('标签不能大于4个，选择你最主要的4个标签即可')
			   }
			   
			   this.$api2.updateUserInfo(data).then(res=>{
				   uni.setStorageSync('squareTagRefresh','1')
				   this.$Show.successJump('设置成功')
			   })
			   
			},
			getData() {
				this.$api2.getTag().then(res => {
					this.list = this.convertData(res.config);
					
					this.list.forEach(item=>{
						let arr = []
						item.children.forEach(item2=>{
							
							console.log('this.userData.tags')
							console.log(this.userData.tags)
							
								if ( this.userData.tags.length>0 && this.userData.tags.includes(item2)) {
								    arr.push({
								    	name:item2,
								    	checked:true
								    })
								} else {
								    arr.push({
								    	name:item2,
								    	checked:false
								    })
								}
						})
						item.children2 = arr
						
					})
					console.log(this.list)
				})
			},
			convertData(rawData) {
				return Object.keys(rawData).map(key => ({
					name: key,
					children: rawData[key]
				}));
			},
			check(item){
				item.checked = !item.checked
				this.$forceUpdate()
			}
		}
	};
</script>


<style lang="scss" scoped>
	.btn {
		width: 600rpx;
		margin: 0rpx auto;
		margin-top: 30rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #25d4d0;
		border-radius: 80px;
		color: #fff;
	}

	.taglist {
		padding: 30rpx;

		.list {
			margin-bottom: 30rpx;
			border-bottom: 1px solid #f8f8f8;

			.title {
				font-size: 34rpx;
				margin-bottom: 20rpx;
			}

			.li {
				span {
					font-size: 32rpx;
					padding: 10rpx 20rpx;
					border-radius: 50px;
					margin-right: 20rpx;
					border: 1px solid #7d7d7d;
					margin-bottom: 20rpx;
					display: inline-block;
					color: #7d7d7d;
				}
				
				.active{
					background-color: #25d4d0;
					color: #fff;
					border-color: #25d4d0;
				}
			}
		}
	}
</style>